<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../start/layui/css/layui.css">
     <script src="../start/layui/layui.js"></script>
</head>
<body>
    <div id="test1"></div>
 
  <script>
  layui.use('transfer', function(){
    var transfer = layui.transfer;
    var $ = layui.$;

    $.post("http://stuapi.ysdjypt.com/api/GetRolesByUserIdLayUI",{
      uid:"c8033529-c2f7-4b32-877f-06004f05f7fe",
      token:"67b159fe-7cb1-4b60-b9c6-e042ed878496"
    },function(res){
      var valueArr = new Array();//右侧列表数据
          for(var i=0;i<res.data.length;i++){
              //console.log(res.data[i].Id);
              valueArr.push(res.data[i].Id);
          }
          console.log(valueArr);
          $.post("http://stuapi.ysdjypt.com/api/GetRolesAll",{
            token:"67b159fe-7cb1-4b60-b9c6-e042ed878496"
          },function(res){
            //console.log(res);

            transfer.render({
              elem: '#test1'  //绑定元素
              ,title:["系统角色","用户角色"]
              ,data: res/* [
                {"value": "1", "title": "李白", "disabled": "", "checked": ""}
                ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
                ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
              ] */
              ,value:valueArr//初始化右侧数据
              ,id: 'demo1' //定义索引
              ,parseData: function(res){
                return {
                  "value": res.Id //数据值
                  ,"title": res.Name //数据标题
                  ,"disabled": res.disabled  //是否禁用
                  ,"checked": res.checked //是否选中
                }
              } ,onchange: function(data, index){
                console.log(data); //得到当前被穿梭的数据
                console.log(index); //如果数据来自左边，index 为 0，否则为 1
                if(index==0){
                for(var i= 0;i<data.length;i++){

                  $.post("http://stuapi.ysdjypt.com/api/AddUserToRole",{
                    uId:"c8033529-c2f7-4b32-877f-06004f05f7fe",
                    rId:data[i].value,
                    token:"67b159fe-7cb1-4b60-b9c6-e042ed878496"
                  },function(res){},'json')
                }
              }else{
                for(var i= 0;i<data.length;i++){
                $.post("http://stuapi.ysdjypt.com/api/RemoveUserFromRole",{
                  uId:"c8033529-c2f7-4b32-877f-06004f05f7fe",
                    rId:data[i].value,
                    token:"67b159fe-7cb1-4b60-b9c6-e042ed878496"
                },function(res){},'json')
              }}}
            });
          },'json')
              //console.log(valueArr);
               //渲染
       
        },'json')
   
  });
  </script>
</body>
</html>